<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	#parse("inner.html")
	<title>Document</title>
</head>
<style type="text/css">
.wrapper{
	display:flex;
	height:600px;
}
.size{
	width:100px;
	height:100px;
	background-color:orange;
}
.shrink{
	flex:1;
}
.transit{

	width:100px;
	height:100px;
	background-color:orange;
	transition:3s;
}

.transit:hover{
	/*background-color:red;*/
	margin-left:500px;
}

.aminate{
	width:100px;
	height:100px;
	background-color:yellowgreen;
	animation:henry 3s;
}

@keyframes henry{
	from {margin-left:10px;}
	to {margin-left:100px;}
};

</style>
<script type="text/javascript" src="henry.js"></script>
<script type="text/javascript" src="jquery-1.11.0.min.js"></script>
<body>
<!-- <div class="transit">transition test</div>
<div class="aminate">aminate test</div> -->
<div class="wrapper">
<div class="left size"></div>
<div class="mid size shrink"></div>
<!-- <div class="right size"></div>
<div class="top size"></div>
<div class="bottom size"></div> -->
</div>
<script type="text/javascript">
$(function(){
	var ="http://dev.chaoxing.com";
	
	// var vivi = new vivi();
	// vivi.viviMove()
})
</script>	
</body>
</html>